 <template>
    <div class="solutionDetails">
        <!-- 头部 -->
        <InsideHeader :bannerType="bannerType"></InsideHeader>
       
        <!-- 面包屑 -->
        <!-- <crumb></crumb> -->
        <div class="crumb">
            <div class="block">  
                <div class="crumbL">
                    <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
                    <em>></em>
                    <a href="#">课题解决方案</a>
                    <em>></em>
                    <nuxt-link :to="{name: 'solution-solutionDetailsTg'}" class="on">提升生产效率</nuxt-link>
                    <div class="clear"></div>
                </div>
                <!-- <div class="crumbR">
                    <nuxt-link :to="{name: 'solution-solutionDetails'}">e-F@ctory </nuxt-link>
                    <nuxt-link :to="{name: 'solution-ctory'}">e-F@ctory Alliance</nuxt-link>
                    <a href="#">产品解决方案</a>
                    <nuxt-link :to="{name: 'solution-industryScheme'}">行业解决方案</nuxt-link>
                    <a href="#">课题解决方案</a>
                    <nuxt-link :to="{name: 'solution-solutionLead'}">导入事例</nuxt-link>
                    <div class="clear"></div>
                </div> -->
                <div class="clear"></div>
            </div>
        </div>

        <div class="block">
            <div class="content">
                <div class="title">
                    <span>提升生产效率</span>
                </div>
                <div class="solutionDetailsKzs">
                    <div id="melfa_contents_2col_a">
                        <div id="melfa_main_area" class="needs_traceability">
                                <h1>按目的划分的解决方案</h1>
                                <section>
                                <p class="lead_txt">以下介绍为了实现制造业的最优化，强化可追溯性、预防维护、提高生产效率、提高质量、节能等，与客户用途相适应的FA解决方案的采用示例。</p>
                                <ul class="needs_nav">
                                   <li><nuxt-link :to="{name: 'solution-solutionDetailsKzs'}">可追溯性强化</nuxt-link></li>
                                   <li> <nuxt-link :to="{name: 'solution-solutionDetailsJn'}">节能</nuxt-link></li>
                                   <li><nuxt-link :to="{name: 'solution-solutionDetailsYf'}">预防维护</nuxt-link></li>
                                   <li class="current"><nuxt-link :to="{name: 'solution-solutionDetailsTg'}">提高生产效率</nuxt-link></li>
                                   <li><nuxt-link :to="{name: 'solution-solutionDetailsPz'}">提高产品品质</nuxt-link></li>
                                </ul>
                                <section class="section">
                                <h2 class="section_ttl">提高生产效率</h2>
                                <div class="list_ex">
                                <ol>
                                <li :class="showliindex==0?'active':''" @click="showli(0)">
                                <a>
                                <div class="order"><span class="inner">1</span></div>
                                <p class="ttl">引进廉价、便于观察的报警灯系统！</p>
                                </a>
                                </li>
                               <li :class="showliindex==1?'active':''" @click="showli(1)">
                                <a>
                                <div class="order"><span class="inner">2</span></div>
                                <p class="ttl">利用摄像头反馈防御实现生产效率的进一步改善！</p>
                                </a>
                                </li>
                                </ol>
                                </div>
                                <div class="section_ex_wrap" v-show="showliindex==0">
                                    <article class="section_ex hide" id="ex1">
                                    <h3 class="ex_ttl"><span class="order">1</span> <span class="inner">引进廉价、便于观察的报警系统</span></h3>
                                    <div class="problem_solution">
                                    <dl class="problem">
                                    <dt>课题</dt>
                                    <dd>需要2台显示器，成本较高。显示器的直接输出，清晰度不匹配，不易看清。</dd>
                                    </dl>
                                    <dl class="solution">
                                    <dt>解决方案</dt>
                                    <dd>成本低廉，可以用简单的构成来构建系统，即使用平板电脑、智能手机也能共享运转信息，兼顾操作性与显示性。</dd>
                                    </dl>
                                    </div>
                                    <div class="em_area">
                                    <div class="em_area_container">
                                    <section class="adoption_example">
                                    <h4 class="ax_ttl">FA解决方案的采用示例</h4>
                                    <figure>
                                    <figcaption>通过简单的构成构建系统，引进廉价、便于观察、易使用的报警灯系统！</figcaption>
                                    <img src="../../static/images/img_041.png" alt="">
                                    </figure>
                                    </section>
                                    <p class="point"> 仅需1台显示器，即可实现操作与高清晰度显示！<br>通过无线LAN可监控各自的装置！
                                    </p>
                                    </div>
                                    </div>
                                    </article>
                                </div>
                                 <div class="section_ex_wrap" v-show="showliindex==1">
                                    <article class="section_ex hide" id="ex1">
                                    <h3 class="ex_ttl"><span class="order">2</span> <span class="inner">利用摄像头反馈防御实现生产效率的进一步改善！</span></h3>
                                    <div class="problem_solution">
                                    <dl class="problem">
                                    <dt>课题</dt>
                                    <dd>由于价格竞争，无法进行设备投资，且手工工序众多，无法掌握生产状况。 </dd>
                                    </dl>
                                    <dl class="solution">
                                    <dt>解决方案</dt>
                                    <dd>引进由摄像头构成的防御系统、可获取品质数据的SA1-Ⅲ，对整个工厂进行监控和分析，以提高生产效率。</dd>
                                    </dl>
                                    </div>
                                    <div class="em_area">
                                    <div class="em_area_container">
                                    <section class="adoption_example">
                                    <h4 class="ax_ttl">FA解决方案的采用示例</h4>
                                    <figure>
                                    <figcaption>通过摄像头的运转监控、SA1-Ⅲ的引进，实现有效的反馈防御、节能、生产效率提高！</figcaption>
                                    <img src="../../static/images/img_042.png" alt="">
                                    </figure>
                                    </section>
                                    <p class="point">通过摄像头掌握生产线与生产设备的状态，实现有效的反馈防御！
                                    <br>通过SA1-Ⅲ，实现质量数据与能源数据的“可视化”！
                                    </p>
                                    </div>
                                    </div>
                                    </article>
                                </div>
                            </section>
                            </section>
                           </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 链接 -->
        <Insidelink></Insidelink>

        <!-- 底部 -->
        <HomeHooter></HomeHooter>
    </div>
</template>

<script>
    import $ from "jquery";
    import "@/assets/css/news.css";
    import InsideHeader from "@/components/head";
    import HomeHooter from "@/components/footer";
    import crumb from "@/components/crumb";
    import Insidelink from "@/components/link";
    export default {
        name: "solutionDetailsKzs",
        components: {
            InsideHeader,
            HomeHooter,
            crumb,
            Insidelink,
        },
        data(){
            return{
                bannerType:'solution',
                serveQuestionsW:'',
                showliindex:0
            }
        },
        methods:{
           showli(indexid){
             this.showliindex=indexid
           }
        }
    }
</script>

<style scoped>
    #melfa_contents_2col_a #melfa_main_area {
        width: 100%;
    }
    #melfa_contents_2col_a #melfa_main_area h1 {
        font-size: 16px;
        margin-bottom: 18px;
        background: url(../../static/images/h_type1_col2.jpg) 0 0 no-repeat;
    }
    #melfa_main_area h1 {
        padding: 10px 0 10px 25px;
        color: #fff;
        font-size: 95%;
        font-weight: bold;
    }
    #melfa_contents_2col_a #melfa_main_area .lead_txt {
        font-weight: 700;
        margin-bottom: 25px;
    }
    #melfa_contents_2col_a #melfa_main_area p {
        font-size: 14px;
        margin-top: 0;
    }
    #melfa_contents_2col_a #melfa_main_area .needs_nav {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        margin: 0 0 40px;
        padding: 0;
        font-size: .81em;
    }
    #melfa_contents_2col_a #melfa_main_area .needs_nav:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        width: 100%;
        height: 2px;
        background-color: #e60f00;
    }
    #melfa_contents_2col_a #melfa_main_area .needs_nav>li.current {
        padding-bottom: 0;
    }
    #melfa_contents_2col_a #melfa_main_area .needs_nav>li {
        position: relative;
        padding-bottom: 6px;
        -ms-flex-preferred-size: 19.49%;
        flex-basis: 19.49%;

    }
    #melfa_contents_2col_a #melfa_main_area .needs_nav>li.current>a {
        padding: 10px 5px 14px;
        border: 2px solid #e60f00;
        border-bottom: none;
        background-color: #fff;
        color: #e20000;
        font-size: 16px
    }
    #melfa_contents_2col_a #melfa_main_area .needs_nav>li>a {
        display: block;
        background-color: #ebebeb;
        padding: 10px 5px;
        color: #7e7e7e;
        font-weight: 700;
        text-align: center;
        font-size: 16px;
    }
    #melfa_contents_2col_a #melfa_main_area .needs_nav>li {
        position: relative;
        padding-bottom: 6px;
        -ms-flex-preferred-size: 19.49%;
        flex-basis: 19.49%;
    }
    #melfa_contents_2col_a #melfa_main_area .section_ttl {
        margin: 0;
        padding: 12px 20px;
        background: #516176 none;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
    }
    #melfa_contents_2col_a #melfa_main_area .list_ex {
        margin-bottom: 60px;
        padding: 30px;
        background-color: #f7f7f7;
        border: 1px solid #d0d0d0;
    }
    #melfa_contents_2col_a #melfa_main_area .list_ex>ol {
        margin: 0;
        padding: 0;
        font-size: 1em;
    }
    #melfa_main_area ol {
        list-style: decimal;
    }
    #melfa_contents_2col_a #melfa_main_area .list_ex li{
        margin-bottom: 10px;
        cursor: pointer;
    }
    #melfa_contents_2col_a #melfa_main_area .list_ex>ol li.active>a {
        background-color: #fff2f2;
        color: #e60000;
    }
    #melfa_contents_2col_a #melfa_main_area .list_ex>ol li>a {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 4px 40px 4px 4px;
        background-color: #fff;
        border: 1px solid #ededed;
        text-decoration: none;
        -webkit-transition: background-color .25s ease-out;
        transition: background-color .25s ease-out;
    }
    #melfa_contents_2col_a #melfa_main_area .list_ex>ol .order {
        width: 35px;
        margin-right: 19px;
        color: #fff;
        text-align: center;
        background-color: #e60000;
        line-height: 35px;
        font-size: 14px;
        font-weight: bold;
    }
    #melfa_contents_2col_a #melfa_main_area .list_ex>ol .ttl {
        padding: 5px 0;
        font-size: 14px;
        font-weight: 700;
        -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    }
    #melfa_contents_2col_a #melfa_main_area .list_ex>ol li>a:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 20px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        display: inline-block;
        width: 13px;
        height: 7px;
        background: url(../../static/icons/arr_down.png) no-repeat;
    }
    #melfa_contents_2col_a #melfa_main_area .section_ex_wrap {
        position: relative;
    }
    #melfa_contents_2col_a #melfa_main_area .section_ex.show {
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp;
        position: relative;
        z-index: 10;
    }
    #melfa_contents_2col_a #melfa_main_area .ex_ttl {
        position: relative;
        margin: 0 0 30px;
        padding: 0 0 18px 55px;
        background: 0 0;
        border-bottom: 2px solid #d9d9d9;
        font-size: 1.5em;
        font-weight: 700;
    }
    #melfa_contents_2col_a #melfa_main_area .ex_ttl .order {
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        padding: 8px 5px;
        min-width: 35px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: #e60000 none;
        color: #fff;
        font-size: .75em;
        text-align: center;
        line-height: 1;
    }
    #melfa_contents_2col_a #melfa_main_area .problem_solution {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    #melfa_contents_2col_a #melfa_main_area .problem_solution .problem {
        background: #f4f4f4;
    }
    #melfa_contents_2col_a #melfa_main_area .problem_solution dl {
        position: relative;
        -ms-flex-preferred-size: 48.72%;
        flex-basis: 48.72%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 3.5em 0 0;
        margin: 0;
        font-size: 1em;
    }
    #melfa_contents_2col_a #melfa_main_area .problem_solution .problem dt {
        background-color: #cfcfcf;
    }
    #melfa_contents_2col_a #melfa_main_area .problem_solution dt {
        width: 100%;
        margin: 0;
        padding: 15px;
        font-size: 1.13em;
        font-weight: 700;
        text-align: center;
    }
    #melfa_contents_2col_a #melfa_main_area .problem_solution .problem dd {
        background: url(../../static/icons/icon_problem.png) no-repeat 30px 46%!important;
        -webkit-background-size: 65px auto!important;
        background-size: 65px auto!important;
    }
    #melfa_contents_2col_a #melfa_main_area .problem_solution dd {
        padding: 35px 40px 35px 120px;
        font-size: 1em;
        font-weight: 700;
        line-height: 1.5;
    }
    #melfa_contents_2col_a #melfa_main_area .problem_solution .solution {
        position: relative;
        background: #fdf2f2;
    }
    #melfa_contents_2col_a #melfa_main_area .problem_solution dl {
        position: relative;
        -ms-flex-preferred-size: 48.72%;
        flex-basis: 48.72%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 3.5em 0 0;
        margin: 0;
        font-size: 16px;
    }
    #melfa_contents_2col_a #melfa_main_area .problem_solution .solution:before {
        content: "";
        position: absolute;
        left: -20px;
        top: 50%;
        display: block;
        width: 66px;
        height: 46px;
        background: url(../../static/icons/arr.png) no-repeat;
        -webkit-background-size: 66px auto;
        background-size: 66px auto;
        -webkit-transform: rotate(-90deg) translateY(-50%);
        -ms-transform: rotate(-90deg) translateY(-50%);
        transform: rotate(-90deg) translateY(-50%);
        z-index: 1;
    }
    #melfa_contents_2col_a #melfa_main_area .problem_solution .solution dt {
        background-color: #f0d4d4;
    }
    #melfa_contents_2col_a #melfa_main_area .problem_solution dt {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 15px;
        font-size: 1.13em;
        font-weight: 700;
        text-align: center;
    }
    #melfa_contents_2col_a #melfa_main_area .problem_solution .solution dd {
        background: url(../../static/icons/icon_solution.png) no-repeat 30px 46%!important;
        -webkit-background-size: 65px auto!important;
        background-size: 65px auto!important;
    }
    #melfa_contents_2col_a #melfa_main_area .problem_solution dd {
        padding: 35px 40px 35px 120px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.5;
    }
    #melfa_contents_2col_a #melfa_main_area .em_area {
        margin-top: 30px;
        padding: 20px;
        background-color: #fdf2f2;
    }
    #melfa_contents_2col_a #melfa_main_area .em_area .em_area_container {
        padding: 29px;
        border: 1px solid #d5d5d5;
        background-color: #fff;
    }
    #melfa_contents_2col_a #melfa_main_area .adoption_example {
        padding: 0 30px 30px;
        background-color: #fafafa;
        border: 1px solid #e10000;
    }
    #melfa_contents_2col_a #melfa_main_area .adoption_example .ax_ttl {
        margin: 0 -30px 40px;
        padding: 20px;
        background-color: #e10000;
        color: #fff;
        font-size: 1.13em;
        font-weight: 700;
        text-align: center;
    }
    #melfa_contents_2col_a #melfa_main_area .adoption_example figcaption {
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 700;
        text-align: center;
    }
    #melfa_contents_2col_a #melfa_main_area .adoption_example figure img {
        border: 1px solid #dadada;
    }
    #melfa_contents_2col_a #melfa_main_area img {
        max-width: 100%;
        height: auto;
        vertical-align: top;
    }
    #melfa_contents_2col_a #melfa_main_area .point {
        margin-top: 20px;
        padding: 30px;
        background-color: #fdf2f2;
        color: #e10000;
        font-size: 14px;
        font-weight: 700;
        text-align: center;
    }
</style>